<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>game-matching</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/lol-public.css" />
    <link rel="stylesheet" href="../../css/game-matching.css" />
    <link rel="stylesheet" href="../../css/matching-tab.css" />
    <link rel="stylesheet" href="../../fonts/iconfont.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>

<body>
    <div id="header">
        <div class="header">
            <div class="container clearfix">
                <div class="language dropdown pull-right">
                    <a id="chose-language" data-target="#" href="###" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="country-cn country-icon active"></i><span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="chose-language">
                        <li>
                            <a href="/league.html?lang=en_us">
                                <i class="country-icon country-gb"></i>English(英语)
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="user-welcome" class="pull-right clearfix">
                    <div class="pull-left">
                        <div class="user-menu dropdown pull-left">
                            <a id="user-menu-panel" data-target="#" href="###" data-toggle="dropdown" data-hover="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="ellipsis">Ujump</span> <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="user-menu-panel">
                                <li>
                                    <a href="/user/2416135.html"><i class="personal-icon"></i>个人主页</a>
                                </li>
                                <li>
                                    <a href="/login/logout.html"><i class="exit-icon"></i>退出登录</a>
                                </li>
                            </ul>
                        </div>
                        <span class="pull-left public-user-leavel level-3">LV3</span>
                        <div class="info-box pull-left">
                            <a href="###">
                                <i></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="container">
                <div class="pull-left vp-logo public-icon"></div>
                <ul class="pull-left lol-nav">
                    <li class="first active"><a href="###">首页</a></li>
                    <li><a href="###">竞猜</a></li>
                    <li><a href="###">赛事</a></li>
                    <li><a href="###">兑换</a></li>
                    <li><a href="###">饰品</a></li>
                    <li><a href="###">V视角</a></li>
                    <li class="last"><a href="###">我的VP</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="bodyer">
        <div class="lol-league-nav">
            <div class="container">
                <ul>
                    <li class="active">赛事首页</li>
                    <li>我的联赛</li>
                    <li>创建联赛</li>
                    <li>联赛管理</li>
                </ul>
            </div>
        </div>
        <div class="container">
            <!-- 侧边 -->
            <div class="wrapper-user-right">
                <div class="user-intro">
                    <div class="clearfix">
                        <img src="../../img/images.jpg" alt="" height="56" width="56" class="pull-left">
                        <div class="user-personal pull-left">
                            <div class="user-name">小黄鸭</div>
                            <p>未填写所在大区</p>
                            <div class="user-gold">
                                <div class="pull-left"><span>150000</span>P</div>
                                <div class="pull-right">充值</div>
                            </div>
                        </div>
                    </div>
                    <div class="user-intro-middle clearfix">
                        <div class="border-green pull-left"></div>
                        <p class="pull-left">请选择《英雄联盟》所在的大区</p>
                        <div class="border-green pull-left"></div>
                    </div>
                    <div>
                        <ul>
                            <li class="blueFont">
                                <div></div>
                            </li>
                            <li class="yellowFont">
                                <div></div>
                            </li>
                            <li class="greenFont">
                                <div></div>
                            </li>
                        </ul>
                    </div>
                    <div class="selection clearfix">
                        <select name="" id="">
                            <option value="电信水晶之痕">电信水晶之痕</option>
                            <option value="电信水晶之痕">电信水晶之痕</option>
                            <option value="电信水晶之痕">电信水晶之痕</option>
                            <option value="电信水晶之痕">电信水晶之痕</option>
                        </select>
                        <input class="create-name" type="text" placeholder="填写当前区的LOL角色名">
                        <a class="btn-base mt20" href="">确定</a>
                    </div>
                </div>
                <div class="user-myFriend">
                    <h3>
                        <i class="icon-user-group iconfont"></i>我的好友 
                        <a class="pull-right" href=""><i class="icon-addFriends iconfont"></i></a>
                        <a class="refresh pull-right" href=""><i class="icon-refresh iconfont"></i></a>
                    </h3>
                    <ul class="friend-list">
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="friend-head" src="../../img/lol_game-matching/user_head.png" alt="">
                                <p class="friend-name">刘半仙<img src="../../img/lol_game-matching/level_7.png" alt=""></p>
                                <p class="win-per">
                                    <span>胜率：66.67%</span>
                                    <span>胜场：20</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 主要 -->
            <div class="wrapper-main">
                <!-- 第一块 -->
                <div class="wrapper-game-matching">
                    <div class="statement-left clearfix">
                        <img src="../../img/lol_game-matching/game-match.jpg" alt="">
                        <div class="wrapper-statement">
                            <p>距离赛季结束</p>
                            <p>还有<span>15</span>天</p>
                        </div>
                    </div>
                    <div class="statement-center">
                        <div class="statement-top">
                            <h3>VPGAME鱼塘争霸赛 
                                <i class="icon-star iconfont active"></i>
                                <i class="icon-star iconfont"></i>
                                <i class="icon-star iconfont"></i>
                                <i class="icon-star iconfont"></i>
                                <i class="icon-star iconfont"></i>
                                <span class="pull-right">匹配教程</span>
                            </h3>
                            <p>
                                <span>联赛时间: 2015-5-1~2015-6-1</span>
                                <span>游戏大区：电信 艾欧尼亚</span>
                            </p>
                        </div>
                        <div class="statement-middle">
                            <div class="score-style">
                                <i class="icon-question iconfont"></i>
                                <p>赏金模式</p>
                                <p><span>10000</span>P</p>
                            </div>
                            <div class="wrapper-border"></div>
                            <div class="game-style">
                                <p>游戏模式</p>
                                <p>征召模式</p>
                            </div>
                            <div class="wrapper-border"></div>
                            <div class="game-map">
                                <p>游戏地图</p>
                                <p>召唤师峡谷</p>
                            </div>
                            <div class="wrapper-border"></div>
                            <div class="amount-person">
                                <p>连坐人数</p>
                                <p><span>3</span>人</p>
                            </div>
                            <div class="wrapper-border"></div>
                            <div class="join-amount">
                                <p>参加人数</p>
                                <p><span>12233</span>人</p>
                            </div>
                        </div>
                        <div class="statement-bottom">
                            <p>冠军</p>
                            <p><span>10万</span>P豆</p>
                        </div>
                    </div>
                </div>
                <!-- 第二块 -->
                <div class="wrapper-game-matching bg-height">
                    <div class="content-head clearfix">
                        <div class="content-left pull-left">
                            <p>正在排队人数 : <span>95</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人正在进行的游戏： <span>24</span></p>
                        </div>
                        <div class="content-right pull-right">
                            <p>在线/总人数： <span>654</span> / <span>1321</span></p>
                        </div>
                    </div>
                    <!-- 匹配比赛 
                    -------------->
                    <!-- <div class="content-body clearfix">
                        <div class="main-head">
                            <p>寻找游戏</p>
                            <p class="game-addr">比赛大区：电信-艾欧尼亚</p>
                        </div>
                        
                        <div class="main-body">
                            <div class="content-game pull-left">
                                <h6 class="font-name-left">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                            </div>
                            <div class="wrap-vs pull-left">
                                <div>
                                </div>
                                <div class="usual-vs">-VS-</div>
                            </div>
                            <div class="content-game pull-right">
                                
                                <h6 class="font-name-right">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-foot">
                        <a href="" class="btn-base">进行匹配</a>
                    </div> -->
                    <!-- 停止匹配 
                    -------------->
                    <!-- <div class="content-body clearfix">
                        <div class="main-head">
                            <p>系统正在为您努力匹配，请耐心等待......</p>
                            <p class="game-addr">比赛大区：电信-艾欧尼亚</p>
                        </div>
                        
                        <div class="main-body">
                            <div class="content-game pull-left">
                                <h6 class="font-name-left">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                            </div>
                            <div class="wrap-vs pull-left">
                                <div>
                                    <span class="time-countdown">20s</span>
                                </div>
                                <div class="usual-vs">-VS-</div>
                            </div>
                            <div class="content-game pull-right">
                                
                                <h6 class="font-name-right">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-foot">
                        <a href="" class="btn-base">停止匹配</a>
                    </div> -->
                    <!-- 匹配成功 
                    -------------->
                    <!-- <div class="content-body clearfix">
                        <div class="main-head">
                            <p>匹配召唤师成功，系统正在挑选队长，请耐心等待....</p>
                            <p class="game-addr">比赛大区：电信-艾欧尼亚</p>
                        </div>
                        
                        <div class="main-body">
                            <div class="content-game pull-left">
                                <h6 class="font-name-left">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img vip">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-grey">
                                        <i class="icon-statusclose iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img vip">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-red">
                                        <i class="icon-statusremind iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="wrap-vs pull-left">
                                <div>
                                </div>
                                <div class="usual-vs">-VS-</div>
                            </div>
                            <div class="content-game pull-right">
                                
                                <h6 class="font-name-right">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-foot">
                        <a href="" class="btn-base">放弃比赛</a>
                    </div> -->
                    <!-- 进入房间 
                    -------------->
                    <!--<div class="content-body clearfix">
                        <div class="main-head">
                            <p>请&nbsp;<span class="greenFont">温柔一小枪</span>&nbsp;进入"英雄联盟"-[电信-艾欧尼亚]，选择 <span class="yellowFont">[PLAY]→[自定义游戏]→[经典模式]→[创建游戏]</span></p>
                            <p class="game-room">房间名：vpgame.001 房间密码：<span class="yellowFont">VP0001</span> 地图：召唤师峡谷 模式：征召模式 等待其它队员进入房间</p>
                        </div>
                        <div class="main-body">
                            <div class="content-game pull-left">
                                <h6 class="font-name-left">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-grey">
                                        <i class="icon-statusclose iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-red">
                                        <i class="icon-statusremind iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="wrap-vs pull-left">
                                <div>
                                    <span class="font-capt">队长</span>&nbsp;&nbsp;<span class="font-user-capt">赏金猎人</span>
                                </div>
                                <div class="usual-vs">-VS-</div>
                            </div>
                            <div class="content-game pull-right">
                                <h6 class="font-name-right">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status status-green">
                                        <i class="icon-statuscomplete iconfont"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-foot">
                        <a href="" class="btn-base mt20">放弃比赛</a>
                    </div>-->
                    <!-- 选择输赢 
                    -------------->
                     <div class="bg-choose"></div>
                    <div class="user-choose">
                        <div class="user-win pull-left">
                            <a href="">
                                <img src="../../img/lol_game-matching/win-game.png" alt="">
                                <img src="../../img/lol_game-matching/user-win.png" alt="">
                            </a>
                        </div>
                        <div class="user-lose pull-right">
                            <a href="">
                                <img src="../../img/lol_game-matching/lose-game.png" alt="">
                                <img src="../../img/lol_game-matching/user-lose.png" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- 比赛结果等待 
                    -------------->
                    <!-- <div class="wrap-waiting">
                        <p class="font18">感谢投票！</p>
                        <p class="font14">等待其它队员投票后，可至“我的比赛”查看比赛结果</p>
                    </div>
                    <div class="btn-wrap clearfix">
                        <a href="" class="btn-base">再来一局</a>
                    </div> -->
                    <!-- 比赛结果 
                    -------------->
                    <!-- <div class="clearfix">
                        <div class="main-body clearfix">
                            <p class="font-result">比赛结果</p>
                            <div class="content-game pt20 pull-left">
                                <div><img src="../../img/lol_game-matching/win-game.png" alt="" width="150" height="79"></div>
                                <h6 class="font-name-left">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-complete"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img vip">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-close"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img vip">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                            </div>
                            <div class="wrap-vs pt20 pull-left">
                                <div>
                                </div>
                                <div class="game-result-vs">-VS-</div>
                            </div>
                            <div class="content-game pt20 pull-right">
                                <div><img src="../../img/lol_game-matching/lose-game.png" alt="" width="150" height="79"></div>
                                <h6 class="font-name-right">召唤师</h6>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                                <div class="pull-left">
                                    <div class="matching-user-img">
                                        <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                    </div>
                                    <p>英雄本色</p>
                                    <div class="status-remind"></div>
                                </div>
                            </div>
                        </div>
                        <div class="btn-wrap btn-wrap-result clearfix">
                            <a href="" class="btn-base pull-left">再来一局</a>
                            <a href="" class="btn-apply pull-right">我要申诉</a>
                        </div> 
                    </div> -->
                </div>
                <div class="wrapper-game-matching game-intro">友情提示： 1）游戏区配成功后，如果放弃游戏将被判定为逃跑 </div>
                <!-- <div class="wrapper-game-matching game-intro">友情提示：   1）游戏区配成功后，如果放弃游戏将被判定为逃跑   2） 搜索房间名时，记得在“显示有密码的房间”前打 √ </div> -->
                <!-- 第三块 -->
                <div class="matching-tab">
                    <ul role="tablist" class="matching-tab-nav clearfix">
                        <li role="presentation" class="active fade in"><a href="#chat-room" aria-controls="chat-room" role="tab" data-toggle="tab">聊天大厅</a></li>
                        <li role="presentation"><a href="#last-game" aria-controls="last-game" role="tab" data-toggle="tab">最近比赛</a></li>
                        <li role="presentation"><a href="#league-rank" aria-controls="league-rank" role="tab" data-toggle="tab">联赛排名</a></li>
                        <li role="presentation"><a href="#my-league" aria-controls="my-league" role="tab" data-toggle="tab">我的比赛</a></li>
                        <li role="presentation"><a href="#appeal" aria-controls="appeal" role="tab" data-toggle="tab">我要申诉</a></li>
                    </ul>
                    <div class="tab-content matching-tab-content">
                        <div role="tabpanel" class="tab-pane active" id="chat-room">
                            <div class="chat-room">
                                <ul role="tablist" class="chat-room-nav clearfix">
                                    <li role="presentation" class="active"><a href="#league-chat" aria-controls="league-chat" role="tab" data-toggle="tab">聊天大厅</a></li>
                                    <li role="presentation"><a href="#team-chat" aria-controls="team-chat" role="tab" data-toggle="tab">最近比赛</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane in active" id="league-chat">
                                        <div class="system-message">
                                            <p class="system-notice"><span class="system-notice-tittle">系统公告</span><span class="system-notice-text">2015国际邀请赛中国区预选赛于5月25日-5月28日启动</span></p>
                                            <p><span class="system-message-tittle">系统消息</span><span class="system-message-text">2015国际邀请赛中国区预选赛于5月25日-5月28日启动</span></p>
                                        </div>
                                        <div class="chat-box">
                                            <ul class="chat-list">
                                                <li class="team-chat-history">
                                                    <span class="chat-history-time">13:56</span>
                                                    <span class="chat-history-name">西门吹雪(队伍)：</span>
                                                    <span class="chat-history-content">不要怂，就是干</span>
                                                </li>
                                                <li class="">
                                                    <span class="chat-history-time">13:56</span>
                                                    <span class="chat-history-name">西门吹雪：</span>
                                                    <span class="chat-history-content">不要怂，就是干</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="chat-input clearfix">
                                            <textarea class="chat-textarea">九只受邀队伍</textarea>
                                            <button class="btn report-btn pull-right">发表</button>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="team-chat">...</div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="last-game">
                            <div class="recent-match-main">
                                <ul class="recent-match-list">
                                    <li>
                                        <div class="clearfix last-game-tittle">
                                            <div class="pull-left">游戏编号：564698713616514<span class="last-game-mode">比赛模式：征召模式</span></div>
                                            <div class="pull-right">
                                                <span class="last-game-win-team ateam-name">召唤师 胜利</span>
                                                <span class="recent-match-time">一分钟前</span>
                                            </div>
                                        </div>
                                        <div class="netplay-message clearfix">
                                            <ul class="recent-user-list clearfix pull-left">
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                            </ul>
                                            <ul class="recent-user-list clearfix pull-right">
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                    <p class="match-user-name ellipsis">刘半仙</p>
                                                </li>
                                            </ul>
                                            <div class="recent-match-vs pull-left clearfix">
                                                <span class="ateam-name game-team-name pull-left ellipsis">召唤师</span>
                                                <span class="pull-left">-VS-</span>
                                                <span class="bteam-name pull-left game-team-name ellipsis">召唤师</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="league-rank">
                            <table class="ranking-table">
                                <thead>
                                    <tr>
                                        <th class="table-player" width="350">玩家排名</th>
                                        <th>赛季积分</th>
                                        <th>胜场</th>
                                        <th>输场</th>
                                        <th>胜率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="1"><span class="key-bg">1</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="2"><span class="key-bg">2</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="3"><span class="key-bg">3</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="4"><span class="key-bg">4</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="4"><span class="key-bg">4</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="4"><span class="key-bg">4</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="4"><span class="key-bg">4</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                    <tr>
                                        <td class="table-player">
                                            <div class="player-message clearfix">
                                                <div class="ranking-key pull-left" data-list="4"><span class="key-bg">4</span></div>
                                                <div class="pull-left player-img">
                                                    <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                </div>
                                                <div class="pull-left ranking-player clearfix">
                                                    <span class="ranking-player-name ellipsis pull-left" title="">Player</span>
                                                    <span class="vip pull-left"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="league-score">1000</span></td>
                                        <td><span class="league-win">60</span></td>
                                        <td><span class="league-lose">40</span></td>
                                        <td><span class="league-win-rate">60%</span></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="pager">
                                <ul class="pagination">
                                    <li><span>上一页</span></li>
                                    <li><span>1</span></li>
                                    <li><span>2</span></li>
                                    <li><span>3</span></li>
                                    <li><span>4</span></li>
                                    <li><span>...</span></li>
                                    <li><span>9</span></li>
                                    <li><span>下一页</span></li>
                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="my-league">
                            <table class="my-league-table ranking-table">
                                <thead>
                                    <tr>
                                        <th class="my-league-first">比赛编号</th>
                                        <th class="my-league-time">比赛时间</th>
                                        <th>比赛结果</th>
                                        <th>积分</th>
                                        <th>房间名</th>
                                        <th></th>
                                        <th>明细</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="new my-league-win">
                                        <td class="my-league-first"><span class="my-league-id">545616165566</span></td>
                                        <td><span class="my-league-time">2016-03-31 14:23:45</span></td>
                                        <td><span class="my-league-winning">胜利</span></td>
                                        <td><span class="my-league-score">+20</span></td>
                                        <td><span class="league-room-name">房间名</span><span class="league-room-name">房间密码</span></td>
                                        <td>
                                            <ul class="team-members clearfix">
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </td>
                                        <td><a class="my-league-look" href="###">查看</a></td>
                                    </tr>
                                    <tr class="my-league-lose">
                                        <td class="my-league-first"><span class="my-league-id">545616165566</span></td>
                                        <td><span class="my-league-time">2016-03-31 14:23:45</span></td>
                                        <td><span class="my-league-winning">失败</span></td>
                                        <td><span class="my-league-score">-20</span></td>
                                        <td><span class="league-room-name">房间名</span><span class="league-room-name">房间密码</span></td>
                                        <td>
                                            <ul class="team-members clearfix">
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </td>
                                        <td><a class="my-league-look" href="###">查看</a></td>
                                    </tr>
                                    <tr class="my-league-no">
                                        <td class="my-league-first"><span class="my-league-id">545616165566</span></td>
                                        <td><span class="my-league-time">2016-03-31 14:23:45</span></td>
                                        <td><span class="my-league-winning">未投票</span></td>
                                        <td><span class="my-league-score">不计分</span></td>
                                        <td><span class="league-room-name">房间名</span><span class="league-room-name">房间密码</span></td>
                                        <td>
                                            <ul class="team-members clearfix">
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="match-user-img vip">
                                                        <a href="###" target="_blank"><img src="http://steam.vpgcdn.com/steamcommunity/public/images/avatars/f3/f3eef5f1b98afe142db6a4265f17a0d6c8edcebc_full.jpg" width="40" height="40" alt=""></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </td>
                                        <td><a class="my-league-look" href="###">查看</a></td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="my-league-alert">PS：未投比赛结果的票将无法计入个人积分，可以向客服申诉提供比赛截图等补计比赛结果！</p>
                            <div class="pager">
                                <ul class="pagination">
                                    <li><span>上一页</span></li>
                                    <li><span>1</span></li>
                                    <li><span>2</span></li>
                                    <li><span>3</span></li>
                                    <li><span>4</span></li>
                                    <li><span>...</span></li>
                                    <li><span>9</span></li>
                                    <li><span>下一页</span></li>
                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="appeal">
                            <p class="appeal-alert">如您对比赛结果存在质疑，请于比赛结束后的24小时内，填写申诉内容，VP客服会尽快联系您！逾期不作处理。</p>
                            <div class="appeal-form form-horizontal">
                                <div class="form-group">
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">问题类型</label>
                                        <div class="col-xs-8 appeal-input">
                                            <select class="form-control short-input">
                                                <option>问题申诉</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">语言</label>
                                        <div class="col-xs-8 appeal-input">
                                            <select class="form-control short-input">
                                                <option>中文</option>
                                                <option>英文</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-1 control-label">问题描述</label>
                                    <div class="col-xs-11 appeal-input">
                                        <input class="form-control long-input" name="" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-1 control-label">问题详情</label>
                                    <div class="col-xs-11 appeal-input">
                                        <textarea class="form-control long-input"></textarea>
                                        <p>还可以输入<span>200</span>字</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">联赛</label>
                                        <div class="col-xs-8 appeal-input">
                                            <input class="form-control short-input" value="VPCL职业联系-S1赛季" name="" type="text">
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">比赛编号</label>
                                        <div class="col-xs-8 appeal-input">
                                            <input class="form-control short-input" value="898555115" name="" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">QQ号</label>
                                        <div class="col-xs-8 appeal-input">
                                            <input class="form-control short-input" value="" name="" type="text">
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label"></label>
                                        <div class="col-xs-8 appeal-input">
                                            <input class="form-control short-input" placeholder="填写LOL的角色名" value="" name="" type="text">
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">所在大区</label>
                                        <div class="col-xs-8 appeal-input">
                                            <select class="form-control">
                                                <option>艾欧尼亚-电信</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-4">
                                        <label class="col-xs-3 control-label">相关截图</label>
                                        <div class="col-xs-8 appeal-input">
                                            <input class="form-control short-input" value="" name="" type="text">
                                        </div>
                                    </div>
                                    <button class="btn upload-btn matching-btn pull-left">上传</button>
                                </div>
                                <p class="upload-img">上传图片小于2M，支持jpg，gif，png，bmp格式</p>
                                <button class="btn matching-btn expressed-btn">提交申诉</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="container clearfix">
            <div class="vpgame-logo pull-left"><i></i></div>
            <ul class="about-vpgame pull-left">
                <li>关于VPGAME</li>
                <li><a href="###">高薪诚聘</a></li>
                <li><a href="###">友情链接</a></li>
                <li><a href="###">网站地图</a></li>
                <li><a href="###">帮助中心</a></li>
            </ul>
            <div class="copyright pull-left">
                <p>客服热线：<i class="copyright-tel">400-800-6676</i>商务合作：bd@vpgame.cn</p>
                <p class="reserved">Copyright©2014 vpgame.com All rights reserved. 浙ICP备14028335号-2</p>
                <p>增值电信业务经营许可证：浙B2-20140286<span class="powered">Powered by Steam</span></p>
                <p class="friendly-link-content">
                    <a href="###">DOTA2RPG</a>
                    <a href="###">星竞界dota2</a>
                    <a href="###">太平洋游戏dota2</a>
                    <a href="###">新浪dota2</a>
                    <a href="###">易竞技</a>
                    <a href="###">178dota2</a>
                    <a href="###">766dota2</a>
                    <a href="###">巴士dota2</a>
                    <a href="###">锐派dota2</a>
                    <a href="###">游戏港口</a>
                </p>
            </div>
        </div>
    </div>
    <!-- 查看比赛结果弹窗 
    -------------->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        比赛结果
    </button>
    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content lol-league-modal  modal-wrap-gameResult">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">比赛结果</h4>
                </div>
                <div class="modal-body">
                    <div class="main-body clearfix">
                        <p class="font-result">比赛结果</p>
                        <div class="content-game pt20 pull-left">
                            <div><img src="../../img/lol_game-matching/win-game.png" alt="" width="150" height="79"></div>
                            <h6 class="font-name-left">召唤师</h6>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img vip">
                                    <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img vip">
                                    <img src="../../img/lol_game-matching/user_head.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                        </div>
                        <div class="wrap-vs pt20 pull-left">
                            <div>
                            </div>
                            <div class="game-result-vs">-VS-</div>
                        </div>
                        <div class="content-game pt20 pull-right">
                            <div><img src="../../img/lol_game-matching/lose-game.png" alt="" width="150" height="79"></div>
                            <h6 class="font-name-right">召唤师</h6>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                            <div class="pull-left">
                                <div class="matching-user-img">
                                    <img src="../../img/lol_game-matching/bg-lol.png" alt="" height="55" width="55">
                                </div>
                                <p>英雄本色</p>
                                <div class="status-green">
                                    <i class="icon-statuscomplete iconfont"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-wrap-result clearfix">
                        <a href="" class="btn-apply">我要申诉</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 添加好友
    ------------ -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
        添加好友
    </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content lol-league-modal modal-wrap-league">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加好友</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-add-friend main-body clearfix">
                        <form class="form-inline" action="">
                            <div class="form-group">
                                <input class="form-control deco-addFriends" type="text">
                                <button class="btn btn-base btn-addFriends" type="submit">搜索</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 添加好友结果列表 -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3">
        添加好友结果列表
    </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content lol-league-modal league-modal-wrap">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加好友</h4>
                </div>
                <div class="modal-body">
                    <div class="main-body clearfix">
                        <form class="form-inline" action="">
                            <div class="form-group">
                                <input class="form-control lol-league-formElement deco-addFriends" type="text">
                                <button class="btn btn-base btn-addFriends" type="submit">搜索</button>
                            </div>
                        </form>
                        <div class="modal-add-friend-list clearfix">
                            <ul>
                                <li class="wrapper-friends-list">
                                    <div class="pull-left">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="40" width="40">
                                    </div>
                                    <div class="intro-friends pull-left">
                                        <p class="ellipsis">鸟哥的linnux
                                            <div class=""></div>
                                        </p>
                                    </div>
                                    <div class="block-add">
                                        <a href=""><i class="icon-add iconfont"></i></a>
                                    </div>
                                </li>
                                <li class="wrapper-friends-list">
                                    <div class="pull-left">
                                        <img src="../../img/lol_game-matching/user_head.png" alt="" height="40" width="40">
                                    </div>
                                    <div class="intro-friends pull-left">
                                        <p class="ellipsis pull-left">鸟哥的linnux</p>
                                        <div class="user-level pull-left"><i></i></div>
                                    </div>
                                    <div class="block-add">
                                        <a href=""><i class="icon-add iconfont"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
